<template>
	<div :style="{margin:'10px'}">
		<a-row :gutter="[8, 8]">
			<a-col :span="12">
				<slot name="toolbar">
					<a-space>
						<a-button type="primary" @click="row_click('add')">新增</a-button>
					</a-space>
				</slot>
			</a-col>
		</a-row>
	</div>
	<div :style="{margin:'6px 10px'}">

		<a-table :dataSource="lists" :columns="columns" @change="tableChange">
			<!-- 表格主体 -->
			<template #bodyCell="{ column, record, index }">

				<template v-if="column.key === 'name'">
					<a> {{ record.name }} </a>
				</template>

				<!-- 操作 -->
				<template v-else-if="column.key === 'action'">
					<a-space>
						<a @click="row_click('edit', record , index)"> 编辑 </a>
						<a @click="row_click('config', record , index)"> 配置 </a>
						<a style="color:red" @click="row_click('del', record , index)"> 删除 </a>
					</a-space>
				</template>


			</template>

		</a-table>
	</div>

</template>
<script setup lang="ts">

import { TableColumnType } from "ant-design-vue";
import { computed , PropType ,ref, reactive, toRaw } from 'vue'
import ML_Component from "./components_class/index"


const emits = defineEmits(['action_click','table_change'])



let props =  defineProps({
	lists: {
		type: Array as PropType< ML_Component[] >,
		required: true,
		default: ()=>{
			return []
		}
	}
})



const columns = ref < TableColumnType[] > ([
		{ 
			key: "index",  width: 68,
			customRender: ({
				index
			}) => index + 1,
		},
		{ key: "_id", dataIndex: "_id", title: "ID", width: 250, },
		// { key: "module", dataIndex: "module", title: "模块", width: 200, },
		{ key: "compontName", dataIndex: "compontName", title: "组件名", width: 250, },
		{ key: "tag", dataIndex: "tag", title: "Tag", width: 200, },
		{ key: "action", title: "操作", },
	]);





// 单行操作-点击
// @handleType 操作类型 edit | add | del | config
let row_click = (handleType: string , record: any = {} , index: number = -1) => {
	
	let row = toRaw(record)

	let obj = { 
		handleType, row ,index
	}
	
	emits('action_click', obj)

}


const tableChange = (pagination:any) => {
	let obj = {
		current: pagination?.current
	}
	emits('table_change', obj)
}

</script>
